<template>
  <!--我的账单-->
  <div id="reportDetail">
    <div v-if="fnlist.length>0" style="width:100%;height:auto">
      <div class="box" v-for="(item,index) in fnlist" :key="index">
        <div class="cent">
          <div class="cent_t">
            <div class="research_l_l">
              <div class="resea_l"></div>
              <div class="resea_r">{{item.task_name}}</div>
            </div>
            <div
              v-if="item.report_type === 0"
              class="research_l_r"
            >你给{{item.restaurant_name}}点评分为{{item.report_score}}分</div>
            <div
              v-if="item.report_type === 1"
              class="research_l_r"
            >你给{{item.restaurant_name}}点评级为{{item.report_level}}级</div>
          </div>
          <div class="cent_b">
            <img src="/static/imgs/icon-tongguo.png" alt v-if="item.report_status == 2" />
            <img src="/static/imgs/icon-weitongguo.png" alt v-if="item.report_status == 4" />
            <img src="/static/imgs/icon-shenhezhong.png" alt v-if="item.report_status == 1" />
            <img src="/static/imgs/icon-daishenhe.png" alt v-if="item.report_status == 3" />
          </div>
        </div>
        <div class="footer">提交报告日期 {{item.submit_time}}</div>
      </div>
    </div>
    <div style="width:100%;height:300px;text-align: center;line-height: 300px;" v-else>暂无数据！</div>
  </div>
</template>

<script>
import { setStorage, getStorage } from "../../utils/storage";
export default {
  data() {
    return {
      fnlist: [
      ],
      userInfo: {}, // 获取用户信息
      // 列表传值
      fnObj: {
        customer_id: "", // 嘉宾id
        current: 1, // 分页-当前页面
        size: 999 // 分页-每页返回条数
      }
    };
  },
  methods: {
    fnInitialize() {
      //  获取短信验证码接口
      this.$http
        .post({
          url: "/mobile/api/myreport",
          data: this.fnObj
        })
        .then(res => {
          this.fnlist = res.data.records;
        });
    }
  },
  async mounted() {
    this.userInfo = await getStorage("userInfo"); // 获取用户信息
    this.fnObj.customer_id = this.userInfo.customer_id; // 获取嘉宾id
    this.fnInitialize(); // 列表接口
  }
};
</script>

<style lang='less'>
page {
  background: rgba(249, 249, 249, 1);
}
#reportDetail {
  background: rgba(249, 249, 249, 1);
}
.box {
  width: 355px;
  min-height: 78px;
  margin: 10px auto;
  padding: 0px 0px 10px 0;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
}
.cent {
  display: flex;
  justify-content: space-between;
}
.cent_t {
  width: 244px;
}
.research_l_l {
  display: flex;
  justify-content: left;
  width: 100%;
  padding-top: 10px;
  box-sizing: border-box;
  line-height: 25px;
  align-content: center;
}
.resea_l {
  width: 2px;
  align-content: center;
  height: 12px;
  margin: 6px 8px 0 7px;
  background: rgba(86, 150, 255, 1);
}
.resea_r {
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: rgba(0, 0, 0, 1);
}
.research_l_r {
  font-size: 14px;
  // font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 25px;
  padding-left: 20px;
  box-sizing: border-box;
}
.cent_b {
  width: 46px;
  height: 46px;
}
.cent_b img {
  width: 46px;
  height: 46px;
}
.footer {
  font-size: 10px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 14px;
  width: 100%;
  text-align: right;
  padding-right: 12px;
  box-sizing: border-box;
}
</style>
